import React, { useEffect, useState } from 'react'
import styles from './home.module.scss'
import {
  SearchBar,
  Toast,
  Swiper,
  Image,
  Grid,
  PullToRefresh,
  InfiniteScroll
} from 'antd-mobile'
import { getSwipe, getMenu, getGoodsList } from '../../api/home'
import type { swipe, menu, goods } from '../../type/home'
import { useHistory } from 'react-router-dom'
import { price } from '../../hook'
import { store } from '../../stores'

export default function HomeIndex () {
  const [bannerList, setBannerList] = useState<swipe[]>([])
  const [menuList, setMenuList] = useState<menu[]>([])
  const [goodsList, setGoodsList] = useState<goods[]>([])
  const [page, setPage] = useState<{
    count: number
    limitNum: number
    brand: string
  }>({
    count: 0,
    limitNum: 10,
    brand: ''
  })
  const hishory = useHistory()
  //banner轮播图
  const getbannersData = async () => {
    const res = await getSwipe()
    setBannerList(res.data)
  }
  //菜单列表
  const getMenuData = async () => {
    const res = await getMenu()
    // console.log(res.data)
    setMenuList(res.data)
  }
  //商品列表
  const getGoodListData = async () => {
    // setHasMore(true)
    const res = await getGoodsList(page)
    setGoodsList(res.data)
  }
  //下拉刷新
  const onRefresh = async () => {
    setPage({ ...page, count: 1, limitNum: 10 })
    getGoodListData()
  }
  //上拉加载更多
  const [hasMore, setHasMore] = useState(true)
  const loadMore = async () => {
    const res = await getGoodsList({ ...page, count: page.count++ })
    setGoodsList([...goodsList, ...res.data])
    setHasMore(res.data.length > 0)
  }
  useEffect(() => {
    getGoodListData()
  }, [page])
  useEffect(() => {
    getbannersData()
    getMenuData()
  }, [])
  const items = bannerList.map((item, index) => (
    <Swiper.Item
      key={index}
      onClick={() => {
        hishory.push('/list')
      }}
    >
      <Image src={item.img} />
    </Swiper.Item>
  ))

  return (
    <div className={styles.home}>
      <PullToRefresh onRefresh={onRefresh}>
        <div
          className='header'
          style={{
            background: '#c82519',
            width: '375px',
            height: '50px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <SearchBar
            placeholder='请输入内容'
            style={{ width: '300px', '--border-radius': '20px' }}
          />
        </div>
        {/* 轮播图 */}
        <Swiper className='my-swipe' loop autoplay>
          {items}
        </Swiper>
        {/* 菜单列表 */}
        <Grid columns={5} className='menu'>
          {menuList.map(item => {
            return (
              <Grid.Item
                key={item.id}
                style={{
                  width: 75,
                  height: 85,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column'
                }}
              >
                <Image
                  src={item.icon}
                  style={{ width: '30px', height: '30px' }}
                  fallback={
                    <img src='https://pic.616pic.com/ys_bnew_img/00/33/91/pV7Zt1EVU0.jpg' />
                  }
                  lazy
                />
                <span style={{ marginTop: 5 }}>{item.title}</span>
              </Grid.Item>
            )
          })}
        </Grid>
        {/* // 商品列表  */}
        <Grid className='goods-list' columns={2}>
          {goodsList.map((item, index) => {
            return (
              <Grid.Item
                key={index}
                className='goods-item'
                onClick={() => {
                  hishory.push(`/detail?proid=${item.proid}`)
                  // window.location.reload()
                }}
              >
                <Image src={item.img1} className='img' />
                <span className='title'>{item.proname}</span>
                <span className='desc'>{item.desc}</span>
                <span className='price'>{price(item.originprice)}</span>
              </Grid.Item>
            )
          })}
        </Grid>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}
